<template>
	<div>
		<!-- 搜索框 -->
		<div style="padding: 10px 0; border: rgb(47,144,185,0.2) solid 1px; box-shadow: 1px 1px 3px #ccc;">
			<el-input style=" width: 15%; margin-left: 10px;" placeholder="商品名称搜索" prefix-icon="el-icon-s-goods" v-model="gname">
			</el-input>
			<el-input style=" width: 15%;" class="ml-10" placeholder="物品分类搜索" prefix-icon="el-icon-search"
				v-model="classly"></el-input>
			<el-button style="margin-left: 10px; background-color: #22a2c3; color: white;" @click="load"
				icon="el-icon-search" circle></el-button>
			<el-button class="ml-5" @click="reset" style="background-color: #e8b004; color: white;"
				icon="el-icon-refresh-left" circle></el-button>
			<el-button style="background-color: #40a070; color: white;" @click="handleAdd" icon="el-icon-plus" circle>
			</el-button>
			<el-button type="danger" round @click="delBetch" v-if="this.roles === 'ROLE_SUPERADMIN'">批量删除</el-button>
		</div>

		<!-- 按钮行 -->
		<div style="margin: 10px 0 ;">

			<!-- TODO 导入导出文件上传 -->
		</div>

		<el-table :data="tableData" border style="width: 100%;" :header-cell-class-name="'headerBg'"
			@selection-change="handleSelectionChange" tooltip-effect="dark">
			<!-- 多选框 -->
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="icon" label="图片" width="120" align="center">
				<template slot-scope="scope">
					<img style="vertical-align:middle; width: 80px; height: 50px;" :src="scope.row.icon">
				</template>
			</el-table-column>
			<el-table-column prop="gname" label="商品名称" width="120"></el-table-column>
			<el-table-column prop="unumber" label="发布账号" width="120"></el-table-column>
			<el-table-column prop="classly" label="物品分类" width="100"></el-table-column>
			<el-table-column prop="price" label="物品价格" width="90"></el-table-column>
			<el-table-column prop="gnum" label="物品数量" width="70"></el-table-column>
			<el-table-column prop="status" label="物品状态" width="100">
				<!-- 状态颜色 -->
				<template scope="scope">
					<span v-if="scope.row.status === 0" style="color: red">已下架</span>
					<span v-else-if="scope.row.status=== 1 " style="clolr: green">正在销售</span>
					<span v-else style="color: greenyellow">已售罄</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="物品创建时间" width="150"></el-table-column>
			</el-table-column>
			<!-- 编辑按键 -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="warning" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
					<el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='再想想'
						icon="el-icon-info" icon-color="red" title="确定删除此商品" @confirm="handleDelete(scope.row.id)">
						<el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
					</el-popconfirm>
					<el-button type="info" icon="el-icon-bottom" style="margin-left: 5px;" circle
						@click="handleunder(scope.row.id)" v-if="scope.row.status != 0 & scope.row.status != 2">
					</el-button>
				</template>

			</el-table-column>
		</el-table>

		<!-- 分页表 -->
		<div style="padding: 10px 0; text-align: center;">
			<el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<!-- 嵌套表单 新增商品信息 -->
		<el-dialog title="添加商品信息" :visible.sync="dialogFormVisible" width="35%" style="text-align: center;">
			<el-form label-width="100px">
				<div style="text-align: center; margin: 10px 0;">
					<el-upload class="avatar-uploader" action="/goods/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="form.icon" :src="form.icon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<el-form-item label="商品名称">
					<el-input v-model="form.gname" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="商品类别">
					<el-select v-model="form.classly" placeholder="请选择商品类别" style="width: 75%;">
						<el-option v-for="item in classlys" :key="item.classly" :label="item.classly"
							:value="item.classly">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="form.price" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="商品数量">
					<el-input v-model="form.gnum" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 嵌套表单 编辑商品信息 -->
		<el-dialog title="编辑商品信息" :visible.sync="dialogFormVisible1" width="35%"  style="text-align: center;">
			<el-form label-width="100px">
				<div style="text-align: center; margin: 10px 0;">
					<el-upload class="avatar-uploader" action="/goods/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="form.icon" :src="form.icon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<el-form-item label="商品名称">
					<el-input v-model="form.gname" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="商品类别">
					<el-select v-model="form.classly" placeholder="请选择商品类别" style="width: 75%;">
						<el-option v-for="item in classlys" :key="item.classly" :label="item.classly"
							:value="item.classly">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="form.price" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="商品数量">
					<el-input v-model="form.gnum" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="edit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Goods",
		data() {
			return {
				// 多选框
				multipleSelection: [],
				tableData: [],
				// 分页查询数据
				pageSize: 10,
				pageNum: 1,
				total: 0,
				// 搜索框数据
				gname: '',
				classly: '',
				// 隐藏表单是否显示
				dialogFormVisible: false,
				dialogFormVisible1: false,
				// 表单数据
				form: {},
				// 获取分类信息
				classlys: [],
				// 获取当前用户账号
				unumber: '',
				// 当前角色
				roles: ''
			}
		},
		methods: {
			// 勾选商品
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

			//批量删除弹窗
			delBetch() {
				if (this.multipleSelection != '') {
					this.$confirm('此操作将永久删除这些商品, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						center: true
					}).then(() => {
						this.delChose()
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message.error("未选择需要删除商品!");
				}

			},

			// 批量删除商品
			delChose() {
				let ids = this.multipleSelection.map(v => v.id) // 将对象数组变为ID数组
				this.request.post("/goods/del/batch", ids).then(res => {
					if (res.code != 500) {
						this.$message.success("删除成功")
						this.load()
					} else {
						this.$message.success("删除失败")
					}
				})
			},

			// 分页查询  页码
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},

			// 分页查询  单页数量
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},

			// 新增商品表框显示
			handleAdd() {
				// 获取类别信息
				this.request.get("/classify").then(res => {
					this.classlys = res.obj
				})
				this.dialogFormVisible = true
				this.form = {
					icon: "",
					unumber: this.unumber,
					status: 1
				}
			},

			// 保存商品
			save() {
				this.request.post("/goods", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible = false
						this.$message.success("保存成功")
						this.load()
					} else {
						this.dialogFormVisible = false
						this.$message.error(res.message)
					}
				})
			},

			// 重置输入框
			reset() {
				this.gname = '',
					this.classly = '',
					this.load()
			},

			// 编辑商品信息
			edit() {
				this.request.put("/goods", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible1 = false
						this.$message.success("保存成功")
						this.load()
					} else {
						this.dialogFormVisible1 = false
						this.$message.error(res.message)
					}
				})
			},

			// 编辑数据
			handleEdit(row) {
				this.form = JSON.parse(JSON.stringify(row))
				// 获取角色信息
				this.request.get("/classify").then(res => {
					this.classlys = res.obj
				})
				this.dialogFormVisible1 = true
				this.load()
			},

			handleunder(id) {
				this.request.put("/goods/" + id).then(res => {
					if (res.code != 500) {
						this.$message.success("下架成功!");
						this.load()
					} else {
						this.$message.error("商品下架失败!")
					}
				})
			},

			// 删除信息
			handleDelete(id) {
				this.request.delete("/goods/" + id).then(res => {
					if (res.code != 500) {
						this.$message.success("删除成功!")
						this.load()
					} else {
						this.$message.error("删除失败!")
					}
				})
			},


			// 封装分页查询请求
			load() {
				this.getUser();
				if (this.roles === 'ROLE_SUPERADMIN') {
					this.request.get('/goods/page', {
						params: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							name: this.gname,
							classly: this.classly,
						}
					}).then(res => {
						this.tableData = res.obj.records
						this.total = res.obj.total
					})
				} else {
					console.log(this.unumber);
					this.request.get('/goods/pageu', {
						params: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							name: this.gname,
							classly: this.classly,
							unumber: this.unumber,
						}
					}).then(res => {
						this.tableData = res.obj.records
						this.total = res.obj.total
					})
				}

			},

			// 商品头像上传
			handleAvatarSuccess(res) {
				this.form.icon = res.obj
			},

			// 获取当前用户
			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.unumber = username.number;
				this.roles = username.role
			},

			// 状态
			// stateFormat(row) {
			// 	if (row.status === 0) {
			// 		return '已下架'
			// 	} else if (row.status === 1) {
			// 		return '正在销售'
			// 	} else if (row.status === 2) {
			// 		return '已售罄'
			// 	}
			// },
			cellstyle(row) {
				switch (row.status) {
					case 0:
						cellstyle = 'red';
						break;
					case 1:
						cellstyle = 'witch';
						break;
					case 2:
						cellstyle = 'green';
						break;
				}
			}

		},


		created() {
			// 请求分页查询
			this.load();
			this.getUser();
		}
	}
</script>

<style>
	.headerBg {
		background: #a4cab6 !important;
		color: #000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
